<template>
  <div class="home">
    <!-- 头部导航 -->
    <header class="header">
      <div class="header-content">
        <h1>🎓 少儿英语辅助学习平台</h1>
        <div class="user-section">
          <div v-if="user" class="user-info">
            <span class="welcome">欢迎，{{ user.nickname || user.username }} ({{ getRoleName(user.role) }})</span>
            <button @click="logout" class="logout-btn">退出</button>
          </div>
          <button v-else @click="showLogin = true" class="login-btn">登录</button>
        </div>
      </div>
    </header>

    <!-- 主要内容 -->
    <main class="main-content">
      <div class="hero-section">
        <h1>让英语学习变得有趣而高效</h1>
        <p class="subtitle">智能语音识别 · 语言学协助工具 · 过关式游戏体验</p>
      </div>

      <!-- 根据用户角色显示不同内容 -->
      <div class="role-content">
        <!-- 未登录状态 -->
        <div v-if="!user" class="guest-content">
          <div class="welcome-message">
            <h2>欢迎使用少儿英语辅助学习平台</h2>
            <p>请登录后使用相应功能</p>
          </div>
          <div class="features-grid">
            <div class="feature-card" @click="showLogin = true">
              <div class="feature-icon">👂</div>
              <h3>磨耳朵听力</h3>
              <p>通过听力训练提升英语语感，适合3-8岁孩子</p>
            </div>

            <div class="feature-card" @click="showLogin = true">
              <div class="feature-icon">🎮</div>
              <h3>游戏关卡</h3>
              <p>在游戏中学习英语单词和语法，寓教于乐</p>
            </div>

            <div class="feature-card" @click="showLogin = true">
              <div class="feature-icon">👨‍👩‍👧‍👦</div>
              <h3>家长监控</h3>
              <p>实时查看孩子学习进度，零压力陪伴</p>
            </div>
          </div>
        </div>

        <!-- 管理员界面 -->
        <div v-else-if="user.role === 'admin'" class="admin-content">
          <AdminManagement />
        </div>

        <!-- 家长界面 -->
        <div v-else-if="user.role === 'parent'" class="parent-content">
          <h2>👨‍👩‍👧‍👦 家长监控中心</h2>
          <p class="role-description">实时了解孩子学习情况，陪伴孩子快乐成长</p>
          <div class="parent-features">
            <div class="feature-card" @click="viewChildProgress">
              <div class="feature-icon">📈</div>
              <h3>学习进度</h3>
              <p>查看孩子的学习情况和进步</p>
              <div class="action-btn">查看详情</div>
            </div>

            <div class="feature-card" @click="setStudyPlan">
              <div class="feature-icon">📅</div>
              <h3>学习计划</h3>
              <p>为孩子制定个性化学习计划</p>
              <div class="action-btn">制定计划</div>
            </div>

            <div class="feature-card" @click="contactTeacher">
              <div class="feature-icon">💬</div>
              <h3>联系老师</h3>
              <p>与老师沟通孩子学习情况</p>
              <div class="action-btn">立即联系</div>
            </div>
          </div>
        </div>

        <!-- 幼儿界面 -->
        <div v-else-if="user.role === 'child'" class="child-content">
          <h2>🎒 幼儿学习中心</h2>
          <p class="role-description">快乐学习英语，在游戏中成长！</p>
          <div class="child-features">
            <div class="feature-card" @click="startLearning('listening')">
              <div class="feature-icon">👂</div>
              <h3>磨耳朵听力</h3>
              <p>听儿歌、故事，提升英语语感</p>
              <div class="progress">今日进度: 60%</div>
            </div>

            <div class="feature-card" @click="startLearning('reading')">
              <div class="feature-icon">📚</div>
              <h3>绘本阅读</h3>
              <p>阅读有趣的英文绘本故事</p>
              <div class="progress">已阅读: 5本</div>
            </div>

            <div class="feature-card" @click="startLearning('game')">
              <div class="feature-icon">🎮</div>
              <h3>单词游戏</h3>
              <p>玩游戏学单词，快乐记忆</p>
              <div class="progress">已通关: 3/10关</div>
            </div>
          </div>
        </div>

        <!-- 教师界面 -->
        <div v-else-if="user.role === 'teacher'" class="teacher-content">
          <h2>👩‍🏫 教师管理中心</h2>
          <p class="role-description">管理班级教学，关注每个孩子的成长</p>
          <div class="teacher-features">
            <div class="feature-card" @click="manageStudents">
              <div class="feature-icon">👨‍🎓</div>
              <h3>学生管理</h3>
              <p>管理班级学生信息和学习情况</p>
              <div class="action-btn">管理学生</div>
            </div>

            <div class="feature-card" @click="createContent">
              <div class="feature-icon">📝</div>
              <h3>教学内容</h3>
              <p>创建和编辑学习材料和课件</p>
              <div class="action-btn">创建内容</div>
            </div>

            <div class="feature-card" @click="viewReports">
              <div class="feature-icon">📊</div>
              <h3>学习报告</h3>
              <p>查看班级学习情况统计分析</p>
              <div class="action-btn">查看报告</div>
            </div>
          </div>
        </div>

        <!-- 未知角色或角色为空 -->
        <div v-else class="unknown-role">
          <h2>欢迎使用少儿英语学习平台</h2>
          <div class="error-message">
            <p>⚠️ 用户角色配置异常</p>
            <p>当前角色: <strong>{{ user.role || '未分配' }}</strong></p>
            <p>请联系系统管理员配置正确的角色权限</p>
          </div>
          <div class="debug-info" v-if="user">
            <h4>调试信息：</h4>
            <p>用户名: {{ user.username }}</p>
            <p>昵称: {{ user.nickname }}</p>
            <p>角色: {{ user.role }}</p>
          </div>
        </div>
      </div>

      <!-- 系统信息 -->
      <div class="app-info">
        <h3>🏢 系统信息</h3>
        <div class="info-grid">
          <div class="info-item">
            <span class="label">版本:</span>
            <span class="value">{{ appInfo?.data?.version || '1.0.0' }}</span>
          </div>
          <div class="info-item">
            <span class="label">状态:</span>
            <span class="value status-active">{{ appInfo?.data?.status || '服务运行正常' }}</span>
          </div>
          <div class="info-item">
            <span class="label">时间:</span>
            <span class="value">{{ formatTime(appInfo?.data?.timestamp) }}</span>
          </div>
        </div>
      </div>
    </main>

    <!-- 登录弹窗 -->
    <LoginModal
      v-if="showLogin"
      @close="showLogin = false"
      @login-success="handleLoginSuccess"
    />
  </div>
</template>

<script>
import { childEnglishApi } from '@/api/childEnglishApi';
import { userService } from '@/services/userService';
import LoginModal from '@/components/LoginModal.vue';
import AdminManagement from '@/components/AdminManagement.vue';

export default {
  name: 'HomePage',
  components: {
    LoginModal,
    AdminManagement
  },
  data() {
    return {
      appInfo: null,
      user: null,
      showLogin: false
    };
  },
  mounted() {
    this.loadAppInfo();
    this.checkLoginStatus();
  },
  methods: {
    async loadAppInfo() {
      try {
        const response = await childEnglishApi.getAppInfo();
        this.appInfo = response;
      } catch (error) {
        console.error('获取应用信息失败:', error);
        // 提供默认应用信息
        this.appInfo = {
          code: 200,
          data: {
            version: '1.0.0',
            status: '服务运行正常',
            timestamp: new Date()
          }
        };
      }
    },

    checkLoginStatus() {
      const userData = userService.getCurrentUser();
      console.log('从localStorage获取的用户数据:', userData);

      if (userData) {
        this.user = userData;
        console.log('当前用户角色:', userData.role);
      } else {
        this.user = null;
      }
    },

    handleLoginSuccess(user) {
      console.log('登录成功，用户信息:', user);
      this.user = user;
      this.showLogin = false;

      // 重新加载应用信息
      this.loadAppInfo();
    },

    logout() {
      userService.clearUser();
      this.user = null;
      alert('已退出登录');
    },

    getRoleName(role) {
      const roleMap = {
        'admin': '管理员',
        'parent': '家长',
        'child': '幼儿',
        'teacher': '教师'
      };
      return roleMap[role] || (role ? role : '用户');
    },

    formatTime(timestamp) {
      if (!timestamp) return '--';
      if (typeof timestamp === 'string') {
        return timestamp;
      }
      return new Date(timestamp).toLocaleString('zh-CN');
    },

    // 幼儿功能
    startLearning(type) {
      const typeMap = {
        'listening': '磨耳朵听力',
        'reading': '绘本阅读',
        'game': '单词游戏'
      };
      alert(`开始${typeMap[type] || type}学习`);
    },

    // 家长功能
    viewChildProgress() {
      alert('查看孩子学习进度');
    },

    setStudyPlan() {
      alert('设置学习计划');
    },

    contactTeacher() {
      alert('联系老师');
    },

    // 老师功能
    manageStudents() {
      alert('管理学生');
    },

    createContent() {
      alert('创建教学内容');
    },

    viewReports() {
      alert('查看学习报告');
    }
  }
};
</script>

<style scoped>
/* 头部样式 */
.header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 15px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.header h1 {
  color: #2c3e50;
  font-size: 1.8em;
  margin: 0;
}

.user-section {
  display: flex;
  align-items: center;
  gap: 15px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.welcome {
  color: #2c3e50;
  font-weight: bold;
}

.login-btn, .logout-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.login-btn {
  background: #3498db;
  color: white;
}

.login-btn:hover {
  background: #2980b9;
  transform: translateY(-2px);
}

.logout-btn {
  background: #e74c3c;
  color: white;
}

.logout-btn:hover {
  background: #c0392b;
  transform: translateY(-2px);
}

/* 主要内容 */
.main-content {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  min-height: calc(100vh - 80px);
}

.hero-section {
  text-align: center;
  margin-bottom: 50px;
  padding: 40px 0;
}

.hero-section h1 {
  color: white;
  font-size: 2.5em;
  margin-bottom: 10px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.subtitle {
  color: #e0e0e0;
  font-size: 1.2em;
  font-style: italic;
}

/* 角色描述 */
.role-description {
  text-align: center;
  color: #7f8c8d;
  margin-bottom: 30px;
  font-size: 1.1em;
}

/* 功能网格 */
.features-grid, .parent-features, .child-features, .teacher-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
  margin-bottom: 40px;
}

.feature-card {
  background: white;
  border-radius: 15px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  border-color: #667eea;
}

.feature-icon {
  font-size: 3em;
  margin-bottom: 15px;
}

.feature-card h3 {
  color: #2c3e50;
  margin-bottom: 10px;
  font-size: 1.3em;
}

.feature-card p {
  color: #7f8c8d;
  line-height: 1.5;
  margin-bottom: 15px;
}

.progress {
  margin-top: 10px;
  padding: 8px;
  background: #ecf0f1;
  border-radius: 8px;
  font-size: 12px;
  color: #2c3e50;
  font-weight: bold;
}

.action-btn {
  margin-top: 10px;
  padding: 8px 16px;
  background: #3498db;
  color: white;
  border-radius: 6px;
  font-size: 12px;
  font-weight: bold;
  display: inline-block;
}

/* 角色特定内容 */
.role-content h2 {
  text-align: center;
  color: white;
  margin-bottom: 15px;
  font-size: 2em;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

/* 欢迎消息 */
.welcome-message {
  text-align: center;
  margin-bottom: 40px;
  color: white;
}

.welcome-message h2 {
  font-size: 2.2em;
  margin-bottom: 10px;
}

.welcome-message p {
  font-size: 1.2em;
  opacity: 0.9;
}

/* 错误消息 */
.error-message {
  background: rgba(255, 255, 255, 0.9);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  margin-bottom: 20px;
}

.error-message p {
  margin: 5px 0;
  color: #e74c3c;
}

.debug-info {
  background: rgba(255, 255, 255, 0.8);
  padding: 15px;
  border-radius: 8px;
  margin-top: 20px;
}

.debug-info h4 {
  margin-bottom: 10px;
  color: #2c3e50;
}

.debug-info p {
  margin: 3px 0;
  color: #7f8c8d;
  font-size: 14px;
}

/* 系统信息 */
.app-info {
  background: rgba(255, 255, 255, 0.9);
  padding: 25px;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  margin-top: 40px;
}

.app-info h3 {
  color: #2c3e50;
  margin-bottom: 15px;
  text-align: center;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 6px;
}

.label {
  font-weight: bold;
  color: #2c3e50;
}

.value {
  color: #5d6d7e;
}

.status-active {
  color: #27ae60;
  font-weight: bold;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 10px;
  }

  .header h1 {
    font-size: 1.5em;
  }

  .features-grid, .parent-features, .child-features, .teacher-features {
    grid-template-columns: 1fr;
  }

  .feature-card {
    padding: 20px;
  }

  .hero-section h1 {
    font-size: 2em;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }
}
</style>
